<template>
	<view class="tabs-container">
		<view class="TopDiv">

			<view class="TopLeftDiv">
				{{order.cashierDeviceName }}
			</view>
			<view class="TopRightDiv" :style="order.OrderColor">
				{{order.orderStatus}}
			</view>
		</view>
		<view class="Xian"></view>

		<view class="CenterDiv">

			<view class="Item">消费金额：{{order.price}}元</view>
			<!-- <view class="Item">实际支付：28.00元</view> -->
			<view class="Item">订单编号：{{order.orderNum}}</view>
			<view class="Item">购买商品：</view>
			<text class="Item">{{ order.content| formatRule}}</text>
			<!-- <view class="Item">可口可乐 x 2 ------------------------------------ 7.00元</view> -->
			<!-- <view class="Item">可口可乐 x 2 ------------------------------------ 7.00元</view> -->

		</view>
		<view class="Xian"></view>

		<view class="BottomDiv">
			<view class="BottomItem">消费时间：{{order.updateTime}}</view>
			<view class="BottomItem">支付方式：{{ order.payMethod==1?'支付宝':'微信' }}</view>

		</view>
		<view class="Xian"></view>
		<view class="BottomDiv">
			<view class="BottomItem">参与的活动：</view>
			<view class="BottomItem" v-for="item in order.parts" style="display: flex;">
				<view class="ActivityTitle">
					{{item.split('----------')[0]}}
				</view>
				<view class="AcitivityXian">
					----------
				</view>
				<view class="ActivityDesc">
					{{item.split('----------')[1]}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				order: {},
				ColorStatus: new Map(),
				a: '',
				orderStatus: new Map(),
			};
		},
		filters: {
			formatRule(val) {
				try {
					val = val.replace(/`/g, '-')
				} catch (e) {
					//TODO handle the exception
				}
				try {
					val = val.replace(/\\n/g, '\n')
				} catch (e) {
					//TODO handle the exception
				}
				return val
			}
		},

		onLoad(option) {

			this.orderStatus.set('0', '订单生成中');
			this.orderStatus.set('1', '订单已完成');
			this.orderStatus.set('2', '订单已取消');
			this.orderStatus.set('3', '订单已退款');

			this.ColorStatus.set('0', 'color:orange');
			this.ColorStatus.set('1', 'color:rgba(67, 207, 124, 1)');
			this.ColorStatus.set('2', 'color:gray');
			this.ColorStatus.set('3', 'color:red');
			console.log(this.ColorStatus.get('1'))
			this.a = this.ColorStatus.get('2')
			// this.active = 0;
			// this.getAllOrderList(); // 获取订单
			let orderNum = option.orderNum
			console.log(orderNum)
			this.orderDetailQueryByNum(orderNum)
		},
		methods: {

			orderDetailQueryByNum(orderNum) {
				let url = this.$api.orderDetailQueryByNum + '?orderNum=' + orderNum
				this.$request(url, null, "POST", false).then(res => {
					console.log(11, res)
					if (res.code == '200') { // 该门店今天有订单
						this.order = res.data

						this.order.OrderColor = this.ColorStatus.get(res.data.orderStatus.toString())
						this.order.orderStatus = this.orderStatus.get(res.data.orderStatus.toString())
						if (this.order.content == null || this.order.content == '') {
							this.order.content = '-------------'
						}
						if (this.order.discounts.length != 0) {
							var regex = /\d+:/; // 匹配数字和冒号
							this.order.parts = this.order.discounts.split(regex).filter(part => part !== "");

						}
					} else {
						uni.showToast({
							title: res.description,
							icon: 'none'
						});
					}
				})
			}
		},
	};
</script>
<style>
	.ActivityTitle {
		color: red;
		width: 25vw;
	}

	.AcitivityXian {
		color: rgba(164, 164, 164, 1)
	}

	.BottomItem {
		color: rgba(60, 60, 60, 1);
		font-size: 26rpx;
		line-height: 200%;
		text-align: left;
		margin-bottom: 4rpx;

	}

	.BottomDiv {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.Item {
		color: rgba(164, 164, 164, 1);
		font-size: 26rpx;
		height: 47rpx;
		text-align: left;
	}

	.CenterDiv {
		margin-top: 46rpx;
		margin-left: 26rpx;
		margin-bottom: 36rpx;
	}

	.TopDiv {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 28rpx 24rpx;

	}

	.TopLeftDiv {
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		line-height: 150%;
		text-align: left;
	}

	.TopRightDiv {

		color: rgba(67, 207, 124, 1);
		font-size: 30rpx;
		line-height: 150%;
		text-align: left;
		font-weight: bold;
	}

	.Xian {
		width: 100%;
		height: 2rpx;
		color: rgba(80, 80, 80, 1);
		background-color: rgba(217, 217, 217, 1);
		font-size: 34rpx;
		line-height: 150%;
		text-align: center;
	}
</style>